import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    Dimensions,
    FlatList,
    NativeModules,
    ScrollView
} from 'react-native';
var RNBridgeModule= NativeModules.RNBridgeModule;
import { MtChar } from 'martian-ui';
const { MtW1, MtW3, MtL3, MtLabel } = MtChar;
import { bindActionCreators } from 'redux';
import {connect} from 'react-redux';
import { fetchRoomList } from '../action/girlAction';
import LabelBar from '../components/common/ArgraceUI/LabelBar'
//引用插件

// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');

class CameraList extends Component {

    constructor(props) {
        super(props);
        this.state = {

        };
    }

    componentDidMount() {

        const {id } = this.props;

        // this.getRoomAndDevice(id);
    }
    getRoomAndDevice(houseID) {
        const {fetchRoomList} = this.props;
        // fetchRoomList(houseID);
    }

    async goEzCamera(){

        RNBridgeModule.popToEZCamera('210715859').then((events)=>{

        }).catch((e)=>{
            console.warn(e);
        })
    }

    //摄像头
    renderCamera(){
        const {roomReducer} = this.props;
        return (
            <View>
                <LabelBar
                  title="摄像头"
                  containerStyle={{marginTop: 17, marginBottom: 5}}
                  titleStyle={{fontSize: 17, color: '#333333', fontWeight: 'bold'}}
                  disableIcon={true}
                />
                <View style={styles.moduleBox}>
                    <FlatList
                        data={[1,2]}
                        keyExtractor={(item, index) => index}
                        renderItem={this.renderCameraItem}
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}
                    />

                </View>
            </View>
        )


    }

    renderCameraItem = ({ item }) => {
        return (
            <TouchableOpacity style={styles.cameraBox}
                  onPress={() => {
                      this.goEzCamera();
                  }}
            >
                <View>
                    <Image
                        source={ require('../img/camera.png')}
                        style={styles.cameraItem}
                    />
                    <Text style={styles.cameraName}>客厅</Text>
                </View>
            </TouchableOpacity>
        )
    }

    render() {
        return (
            <View style={styles.container}>
                {this.renderCamera()}
            </View>
        );
    }
}

function mappingStateToProps(state) {
    const {roomReducer} = state;
    return {
        roomReducer,
    };
}
function mapDispatchToProps(dispatch) {
    const actions = {
        fetchRoomList,
    };
    return bindActionCreators(actions, dispatch);
}

const styles = StyleSheet.create({

    cameraBox:{
        width: 135,
        height: 100,
        marginRight: 15,
    },
    container: {
        flex: 1,
    },
    moduleBox: {
        width: width,
        paddingLeft: 20,
        paddingBottom: 10,
    },
    subtitle:{
        fontWeight: 'bold',
        padding: 15,
    },
    cameraItem: {
        borderRadius: 12,
        justifyContent: 'center',
        alignItems: 'center',
    },
    cameraName: {
      fontSize: 14,
      color: '#333333'
    }

});


module.exports = connect(mappingStateToProps, mapDispatchToProps)(CameraList);
